import React from 'react'
import BoxModel from './BoxModel/index'

import './index.css'

import { Input, Row, Col } from 'antd'

class PropertyBar extends React.Component {
  render() {
    let content = {
      width: 100,
      height: 50,
    }
    let border = {
      topWidth: 1,
      topStyle: 'solid',
      topColor: '#ddd',
      leftWidth: 1,
      leftStyle: 'solid',
      leftColor: '#ddd',
      rightWidth: 1,
      rightStyle: 'solid',
      rightColor: '#ddd',
      bottomWidth: 1,
      bottomStyle: 'solid',
      bottomColor: '#ddd',
    }
    let padding = {
      topWidth: 8,
      leftWidth: 8,
      rightWidth: 8,
      bottomWidth: 8,
    }
    let margin = {
      topWidth: 8,
      leftWidth: 8,
      rightWidth: 8,
      bottomWidth: 8,
    }
    return (
      <div className='property-bar'>
        <BoxModel
          content={content}
          border={border}
          padding={padding}
          margin={margin}
        />

        <div className='property-list'>
          <Row wrap={false} className='gutter-row'>
            <Col flex='100px'>
              <p>文本：</p>
            </Col>
            <Col flex='auto'>
              <Input size='small' />
            </Col>
          </Row>
          <Row wrap={false} className='gutter-row'>
            <Col flex='100px'>
              <p>类型：</p>
            </Col>
            <Col flex='auto'>
              <Input size='small' />
            </Col>
          </Row>

          {[
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
            20,
          ].map((r: number) => {
            return (
              <Row wrap={false} className='gutter-row' key={r}>
                <Col flex='100px'>
                  <p>类型：</p>
                </Col>
                <Col flex='auto'>
                  <Input size='small' />
                </Col>
              </Row>
            )
          })}
        </div>
      </div>
    )
  }
}

export default PropertyBar
